<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>Basic DateBox - jQuery EasyUI Demo</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/demo/demo.css">
    <!-- <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery.min.js"></script> -->
    <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>

    <!-- javascript -->
    <script type="text/javascript">
        // 自动加载方法  start
        $(document).ready(function(){
            // 表单验证 start
            // 邮件地址验证
            $('#emailId').validatebox({
                required: true,
                validType: 'email',
                missingMessage: '邮件地址不能为空.',
                invalidMessage:'请输入正确的邮件地址.'
            });

            // 用户名验证
            $('#usernameId').validatebox({
                required: true,
                validType:['chinese','length[3,6]', 'aaa'],
                missingMessage: '用户名不能为空.'
            });
            // 表单验证 end

            // extends validatebox rules
            $.extend($.fn.validatebox.defaults.rules, {
                chinese : {// 验证中文
                    validator : function(value) {
                        return /^[\u0391-\uFFE5]+$/i.test(value);
                    },
                    message : '请输入中文.'
                },
                length : {// 长度验证
                    validator : function(value, param){
                        var len = $.trim(value).length;
                        return len >= param[0] && len <= param[1];
                    },
                    message : '内容长度介于{0}和{1}之间.'
                },
                aaa : {	// 随意定义了一个规则
                    validator : function(value){
                        return value == '雪山独孤';
                    },
                    message : '名字为[雪山独孤].'
                }
            });	// end rules


            // 提交表单 start
            $('#ff').form({
                url:'testAction.do',
                onSubmit: function(param){	// 提交之前的回调函数。
                    param.email = '123@qq.com';	// 提交参数
                    param.username = 'Jacky';

                    var isValid = $(this).form('validate');	// 提交验证
                    return isValid;  	// return false to prevent submit;
                },
                success:function(data){		// 提交成功后的回调函数。
                    //alert(data);
                    var data = eval('(' + data + ')');  // change the JSON string to javascript object
                    if (data.success){
                        alert(data.message);
                        alert(data.success);
                    }
                }
            });
            // 提交表单 end

        });	// 自动加载方法  end
    </script>
</head>

<body>
<form id="ff" method="post">
    <div style="margin-top:25px;"></div>
    <label>邮箱：</label><input id="emailId" style="width:200px;" />

    <div style="margin-top:25px;"></div>
    <label>用户名：</label><input id="usernameId" style="width:200px;"/>

    <div style="margin-top:25px;"></div>
    <input type="submit" value="提交"/>
</form>
</body>
</html>